<template>
	<view class="container">
		<view class="top">
			<view class="topStyle">
				<view class="top1">
					<text style="text-align: center;">昵称</text>
					<input style="padding: 0 0 0 10px;" type="text" v-model.trim="form.name" placeholder="请输入昵称" />
				</view>
				<view class="top1">
					<text style="text-align: center;">账号</text>
					<input style="padding: 0 0 0 10px;" type="text" v-model.trim="form.username" placeholder="请输入账号" />
				</view>
				<view class="top1" style="border: none;">
					<text style="text-align: center;">密码</text>
					<input style="padding: 0 0 0 10px;" type="text" v-model.trim="form.password" placeholder="请输入密码" />
				</view>
			</view>
			<view class="Skeleton" @click="addConfrimAdmin">
				确认保存
			</view>
		</view>
		<view class="top" style="background-color: #F1EFF2;" v-for="(item,index) in lists" :key="index">
			<view class="topStyle" style="height: 56px;">
				<view class="top1">
					<text style="text-align: center;">昵称</text>
					<text class="desc">{{item.name}}</text>
				</view>
				<view class="top1">
					<text style="text-align: center;">账号</text>
					<text class="desc">{{item.username}}</text>
				</view>
			</view>
			<view v-if="item.disabled" class="Skeleton" style="background-color: gray;" @click="check(item.id, item.disabled)">启用</view>
			<view v-else class="Skeleton" style="background-color: #f22424;" @click="check(item.id, item.disabled)">禁用</view>
		</view>
		
		<view class="store-list"></view>
		
		<view class="bottom_box"></view>
		
		<view class="bottom">
			<view class="Skeleton1" @click="reset">
				添加核销账号
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				store_id:"",
				form:{
					name:'',
					username:'',
					password:'',
					user_id:'',
					store_id:'',
				},
				loading:false,
				lists:[]
			}
		},
		onLoad(options){
			// this.store_id = options.id;
			// this.getList();
			this.getStoreIdByUserId();
		},
		methods: {
			async getStoreIdByUserId(){
				const userinfo = uni.getStorageSync('userinfo');
				const res = await this.$http.post("getStoreDataByUserId",{user_id:userinfo.id})
				this.store_id = res.data.id;
				this.getList();
			},
			async check(admin_id, disabled){
				const userinfo = uni.getStorageSync('userinfo');
				const query = {
					admin_id,
					user_id: userinfo.id,
					store_id: this.store_id,
					disabled: disabled?0:1
				}
				
				try{
					const res = await this.$http.post('changeAdminStatus',query);
					this.$api.msg(res.msg || '改变成功')
					this.getList();
				}catch(e){
					this.$api.msg((e || {}).msg || '改变失败')
				}
				
			},
			reset(){
				this.form = {
					name:'',
					username:'',
					password:'',
					user_id:'',
					store_id:'',
				};
			},
			async addConfrimAdmin(){
				if(!this.form.name){
					this.$api.msg("请输入昵称")
				}else if(!this.form.username){
					this.$api.msg("请输入账号")
				}else if(!this.form.password){
					this.$api.msg("请输入密码")
				}else{
					try{
						const userinfo = uni.getStorageSync('userinfo');
						this.form.store_id = this.store_id;
						this.form.user_id = userinfo.id;
						const res = await this.$http.post("addConfirmAdmin",this.form);
						if(res.code == 1){
							this.$api.msg("创建成功")
							this.getList();
							this.reset();
						}else{
							this.$api.msg(( e || {}).msg || "创建失败")
						}
					}catch(e){
						this.$api.msg(( e || {}).msg || "创建失败")
					}
				}
			},
			async getList(){
				try{
					this.loading = true;
					const res = await this.$http.post('confirmAdminList',{store_id: this.store_id});
					this.lists = res.data || [];
				}finally{
					this.loading = false;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.desc{
		padding-left: 20rpx;
		color: #999;
	}
</style>

<style>
	page {
		background-color: #F1EFF2;
	}

	.container {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.top {
		width: 100%;
		height: 171px;
		background: rgba(210, 252, 230, 0.7);
		/* background-color: #D2FCE6; */
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.topStyle {
		width: 85%;
		height: 84px;
		background: #FFFFFF;
		border-radius: 3px;
	}

	.top1 {
		width: 100%;
		height: 28px;
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		border-bottom: 1px solid #999999;
		padding: 3px 0 0 9px;
		display: flex;
		align-items: baseline;
	}

	.Skeleton {
		width: 85%;
		height: 38px;
		background-color: #06AC6F;
		text-align: center;
		font-size: 14px;
		color: #FFFFFF;
		margin: 16px 0 0 0;
	}

	.bottom_box{
		height: 67px;
	}
	.bottom {
		width: 100%;
		height: 67px;
		background: #FFFFFF;
		box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.03);
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.Skeleton1 {
		width: 85%;
		height: 38px;
		line-height: 38px;
		background-color: #d7da0c;
		text-align: center;
		font-size: 14px;
		color: #FFFFFF;
		border-radius: 20px;
		/* margin: 16px 0 0 0; */
	}
</style>
